<template>
  <view class="entire-tabbar">
    <image class="tabbar-bg" src="/static/tabbar/NaviBar.png"></image>
    <view class="tabbar-content">
      <view
        v-for="(item, index) in tabList"
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @click="handleSwitch(index)"
      >
        <image
          class="tab-icon"
          :src="currentTab === index ? item.activeIcon : item.icon"
          v-if="index !== 2"
        ></image>
        <view
          class="tab-icon"
          :src="currentTab === index ? item.activeIcon : item.icon"
          v-else
        ></view>
        <image
          class="tab-icon-middle"
          src="/static/tabbar/selected-Mission.png"
          v-if="index === 2"
        ></image>
        <text class="tab-text">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const currentTab = ref(0)

const tabList = [
  {
    text: '首页',
    icon: '/static/tabbar/Home.png',
    activeIcon: '/static/tabbar/selected-Home.png',
    path: '/pages/index/index',
  },
  {
    text: '课程中心',
    icon: '/static/tabbar/Course.png',
    activeIcon: '/static/tabbar/selected-Course.png',
    path: '/pages/courseCenter/courseCenter',
  },
  {
    text: '我的任务',
    icon: '/static/tabbar/selected-Mission.png',
    activeIcon: '/static/tabbar/selected-Mission.png',
    path: '/pages/myMission/myMission',
  },
  {
    text: '知识驿站',
    icon: '/static/tabbar/knowledgeStation.png',
    activeIcon: '/static/tabbar/selected-knowledgeStation.png',
    path: '/pages/knowledgePost/knowledgePost',
  },
  {
    text: '我的',
    icon: '/static/tabbar/Me.png',
    activeIcon: '/static/tabbar/selected-Me.png',
    path: '/pages/about/about',
  },
]

// 根据当前路由设置激活状态
const setActiveTab = () => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const route = currentPage.route

  // 根据路由路径设置当前激活的标签
  switch (route) {
    case 'pages/index/index':
      currentTab.value = 0
      break
    case 'pages/courseCenter/courseCenter':
      currentTab.value = 1
      break
    case 'pages/myMission/myMission':
      currentTab.value = 2
      break
    case 'pages/knowledgePost/knowledgePost':
      currentTab.value = 3
      break
    case 'pages/about/about':
      currentTab.value = 4
      break
  }
}

onMounted(() => {
  setActiveTab()
})

onShow(() => {
  setActiveTab()
})

const handleSwitch = (index) => {
  currentTab.value = index
  uni.switchTab({
    url: tabList[index].path,
  })
}
</script>

<style scoped lang="scss">
.entire-tabbar {
  width: 100%;
  height: 150rpx;
  position: fixed;
  bottom: 0;
  z-index: 10;

  .tabbar-bg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 150rpx;
  }

  .tabbar-content {
    position: relative;
    z-index: 11;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .tab-item {
      display: flex;
      flex-direction: column;
      position: relative;
      align-items: center;
      .tab-icon {
        width: 48rpx;
        height: 48rpx;
        margin-bottom: 8rpx;
      }
      .tab-icon-middle {
        top: -70rpx;
        position: absolute;
        width: 95rpx;
        height: 95rpx;
      }
      .tab-text {
        font-size: 23rpx;
        color: #939393;
      }

      &.active {
        .tab-text {
          color: #060607;
        }
      }
    }
  }
}
</style>
